<template>
  <div>
    <MainContentSearchBarWrapper>
      <SearchBar inline>
        <template #normal>
          <el-form-item label="分类名称">
            <el-input
                v-model="tableForm.name"
                clearable
                placeholder="请输入分类名称"
            ></el-input>
          </el-form-item>
<!--          <ins-cascader-filter @change="(value) => tableForm.queryInsIds = value"></ins-cascader-filter>-->
          <!-- <el-form-item label="设置快捷入口">
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item> -->

        </template>
        <template #toolbar>
          <el-form-item>
            <!-- <el-button @click="resetForm">重置</el-button>
            <el-button type="primary" @click="onSearch">查询</el-button> -->
            <el-button type="primary" @click="isAdd = true">新建事件分类</el-button>
          </el-form-item>
        </template>
      </SearchBar>
    </MainContentSearchBarWrapper>
    <div class="_content_list">
<!--      <div class="clueList">-->
<!--        &lt;!&ndash; <div class="clueList-title">事件分类</div> &ndash;&gt;-->
<!--        <div class="fr">-->
<!--          <el-button type="primary" @click="isAdd = true">新建</el-button>-->
<!--        </div>-->
<!--        <div class="clear-both"></div>-->
<!--      </div>-->
      <LayoutTable
        ref="ListTable"
        url="/flow/eventClassify/pageList"
        disable-auto-height
        :param="tableForm"
      >
        <el-table-column
          prop="name"
          label="分类名称"
          min-width="150"
        ></el-table-column>
        <el-table-column
          prop="eventNum"
          label="关联事件数量"
          min-width="150"
        ></el-table-column>
        <!-- <el-table-column
          prop="startType"
          label="设置快捷入口"
          min-width="100"
        >
          <template slot-scope="scope">
            <div>
             {{scope.row.startType | startTypeFilters}}
            </div>
          </template>
        </el-table-column> -->
        <el-table-column
          prop="remark"
          label="备注"
          min-width="150"
        ></el-table-column>
        <!-- <el-table-column
          prop="name"
          label="创建人"
          min-width="150"
        ></el-table-column> -->
        <el-table-column prop="createTime" label="创建时间" min-width="150">
          <template #default="scope">
            <div>
              {{ $filters.dateFormat(scope.row.createTime) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template #default="scope">
            <div>
              <el-button link type="primary" @click="toEditor(scope.row)">
                编辑
              </el-button>
              <el-button @click="delEventClassify(scope.row)" link type="primary">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </LayoutTable>
    </div>
    <calssify-dialog
      @closeClassAdd="closeClassAdd"
      @addAttribute="addAttribute"
      :addData="addData"
      :isAdd="isAdd"
    ></calssify-dialog>
  </div>
</template>
<script>
import calssifyDialog from "./calssifyDialog.vue";
import EventApi from "@/api/eventApi";
export default {
  components: { calssifyDialog },
  data() {
    return {
      isAdd: false,
      addData: { id: null },
      tableForm: {
        name: "",
        queryInsIds: [],
      },
    };
  },
  methods: {
    addAttribute() {
      this.isAdd = false;
      this.addData = { id: null };
      this.onSearch();
    },
    closeClassAdd() {
      this.isAdd = false;
      this.addData = { id: null };
    },
    toEditor(row) {
      this.isAdd = true;
      this.addData = JSON.parse(JSON.stringify(row));
    },
    async delEventClassify(row) {
      let rs = await EventApi.delEventClassify({ id: row.id, name: row.name });
      if (rs.code === 200) {
        ElMessage.success("删除成功");
        this.onSearch();
      }
    },
    resetForm() {
      this.tableForm = {
        name: "",
      };
      this.onSearch();
    },
    onSearch() {
      this.$nextTick(() => {
        this.$refs.ListTable.search();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.clueList {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 700;
  color: #2c313b;
  &-title {
    display: inline-block;
    span {
      font-weight: normal;
      font-size: 14px;
      margin-left: 10px;
      i {
        color: #6178ff;
        font-style: initial;
        margin: 3px;
      }
    }
  }
}
//._content_list {
//  background: #fff;
//  padding: 16px 24px;
//}
</style>
